<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>一起会议吧</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />
  </head>

  <body>
    <div id="app">
      <!-- TODO：请在下面实现需求 -->
      <!-- 登录/注销窗口 -->
      <div class="login">
        <div class="left-tools">
          <a class="close-btn"></a>
          <a class="shrink-btn"></a>
        </div>
        <h3>{{login?"注销":"登录"}}</h3>
        <p v-if="!login">
          选择用户：<select id="selectUser" v-model="select">
            <option
              :value="item.name"
              v-for="(item,index) in dataList"
              :key="item.id"
            >
              {{item.name}}
            </option>
          </select>
        </p>
        <p v-if="login">当前用户为：{{select}}</p>

        <a class="login-btn" @click="loginbtn">{{login?"注销":"登录"}}</a>
      </div>

      <!-- 右侧显示用户列表窗口按钮 -->
      <button id="show" class="right-btn" @click="vshow = true" v-show="!vshow">
        <span class="iconfont icon-left-arrow"></span>
      </button>

      <!-- 用户列表窗口 -->
      <div class="user-dialog" v-if="login" v-show="vshow">
        <!-- 用户列表窗口上侧工具栏 -->
        <ul class="tools">
          <li class="tools-left">
            <button @click="show = 1" :class="{'active' : show === 1}">
              <span class="iconfont icon-close"></span>
            </button>
            <button @click="show = 2" :class="{'active' : show === 2}">
              <span class="iconfont icon-dialog"></span>
            </button>
            <button @click="show = 3" :class="{'active' : show === 3}">
              <span class="iconfont icon-list"></span>
            </button>
          </li>
          <li class="tools-right">
            <button class="show-list" @click="vshow = false">
              <span class="iconfont icon-retract"></span>
            </button>
          </li>
        </ul>

        <!-- 用户列表 -->
        <ul class="say-list">
          <li>
            <span class="iconfont icon-microphone"></span>
          </li>
          <li class="line"></li>
          <li>正在讲话：Tom；</li>
        </ul>
        <ul class="user-list">
          <li v-for="item in showList">
            <img class="header" src="./images/header1.png" />
            <div class="user-name">
              <span
                v-if="item.isHost"
                class="iconfont icon-user header-icon"
              ></span>
              <span class="iconfont icon-microphone"></span>
              {{item.name}}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
    <script type="text/javascript">
      // TODO：请在下面实现需求
      new Vue({
        el: "#app",
        data() {
          return {
            select: "Tom",
            login: false,
            dataList: [],
            show: 2,
            vshow: true,
          };
        },
        created() {
          axios({
            url: "./js/userList.json",
            method: "GET",
          }).then((res) => {
            this.dataList = res.data;
          });
        },
        methods: {
          loginbtn() {
            this.login = !this.login;
          },
        },
        computed: {
          showList() {
            if (this.show === 2) {
              return this.dataList.filter((item) => {
                if (item.name === this.select) return item;
              });
            } else if (this.show === 3) {
              let index = this.dataList.findIndex((item) => {
                console.log(item.name, this.select);
                return item.name === this.select;
              });
              if (index !== -1) {
                let arr = JSON.parse(JSON.stringify(this.dataList));
                arr.unshift(arr[index]);
                arr.splice(index + 1, 1);
                return arr;
              }
            } else if (this.show === 1) {
              return [];
            }
          },
        },
      });
    </script>
  </body>
</html>
